<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>在线书城-详情</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="assets/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="assets/css/overhang.min.css" rel="stylesheet"/>
    <link href="assets/css/animate.min.css" rel="stylesheet"/>
    <link href="assets/css/main.min.css" rel="stylesheet"/>

    <!-- Favicon -->
    <link rel="shortcut icon" href="/assets/images/favicon.ico"/>

    <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet'
          type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,500,500italic,700,700italic'
          rel='stylesheet' type='text/css'/>
</head>
<body>


<div id="wrapper">
    <div id="page-content-wrapper" class="st-pusher">
        <div class="st-pusher-after"></div>
        <!-- ============================================== HEADER ============================================== -->
        <div th:replace="header :: header"></div>
        <!-- ============================================== HEADER : END ============================================== -->

        <div class="content wow fadeInUp">
            <div class="container">
                <div class="row">
                    <ul class="breadcrumb text-center">
                        <li><a href="/index">Home</a></li>
                        <li><a href="/books">Books</a></li>
                        <li class="active">书本详情</li>
                    </ul>

                    <div class="divider">
                        <img class="img-responsive" src="assets/images/shadow.png" alt=""/>
                    </div><!-- /.divider -->
                </div>
                <!--书本详情-->
                <div class="row inner-top-xs single-book-block">
                    <div class="col-md-9 col-md-push-3">
                        <!-- .primary block -->
                        <div class="single-book primary-block">
                            <div class="row">
                                <div class="col-md-5 col-sm-5">
                                    <div class="book-cover">
                                        <!--书本详情页的图片-->
                                        <img width="268" height="408" alt="" src="assets/images/blank.gif"
                                             th:attr="data-echo=${book.img}"/>
                                    </div><!-- /.book-cover -->
                                </div>
                                <div class="col-md-7 col-sm-7">
                                    <div class="featured-book-heading">
                                        <h1 id="bookname" class="title" th:text="${book.bookname}"></h1>
                                        <p class="book-author">
                                            作者：
                                            <a id="author" href="#" th:text="${book.author}"></a>
                                        </p>
                                        <p class="book-publisher">
                                            出版社：
                                            <a id="publisher" href="#" th:text="${book.publisher}"></a>
                                        </p>
                                        <p class="book-publishTime">
                                            出版时间：
                                            <a id="publishTime" href="#" th:text="${#dates.format(book.publishTime,'yyyy-MM-dd')}"></a>
                                        </p>
                                        <p class="book-ISBN">
                                            ISBN号：
                                            <a id="ISBN" href="#" th:text="${book.ISBN}"></a>
                                        </p>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-3">
                                            <p id="price" class="single-book-price" th:text="${'￥'+book.price}"></p>
                                        </div>
                                        <div class="col-md-9">
                                            <div class="add-cart-button btn-group">
                                                <button class="btn btn-single btn-sm" type="button"
                                                        data-toggle="dropdown">
                                                    <img src="assets/images/add-to-cart.png" alt=""/>
                                                </button>
                                                <button id="addcart" th:name="${book.id}" onclick="addcart(this)" class="btn btn-single btn-uppercase" type="button">
                                                    加入购物车
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!--描述-->
                                    <div id="description" class="description">
                                        <p><b>书本描述：</b></p>
                                        <p th:text="${book.description}"></p>
                                    </div>
                                </div>
                            </div>
                        </div>                <!-- /.primary block -->

                        <!--阴影分割-->
                        <div class="divider inner-top-xs">
                            <img src="assets/images/shadow.png" class="img-responsive" alt=""/>
                        </div>
                    </div><!-- /.col -->

                </div><!-- /.row -->
            </div><!-- /.container -->
        </div><!-- /.content -->

        <!-- ============================================== FOOTER ============================================== -->
        <div th:replace="footer :: footer"></div>
        <!-- ============================================== FOOTER : END ============================================== -->
    </div><!-- /.st-pusher -->

</div><!-- /#wrapper -->

<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/js/overhang.min.js"></script>
<script type="application/javascript">
    //添加到购物车
    function addcart(self) {
        var bookid = $(self).attr("name");
//        success();
        $.post("/post/addcart.do",{bookid:bookid},function(data){
            if(data.code == 200){
                success();
            }else {
                error();
            }
        });
    }
    function success() {
        $('body').overhang({
            message: "添加购物车成功",
            duration: 5,
            speed: 1000,
//                closeConfirm: true
        });
    }
    function error() {
        $('body').overhang({
            message: "添加购物车失败",
            duration: 5,
            speed: 1000,
//                closeConfirm: true
        });
    }
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/perfect-scrollbar.min.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/jquery.customSelect.min.js"></script>
<script src="assets/js/jquery.easing-1.3.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/echo.min.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
